<!doctype html>
<html>
  <head>
    <title>Test drawImage(video) with canvas with different composite modes.</title>
    <script src="resources/canvas-composite-image-common.js"></script>
    <style type="text/css">
      body { margin: 5px; font-family: arial,verdana,helvetica; background: #fff; }
      canvas { border: 1px solid #999; }
      div { margin: 10px; }
      #output h1 { font-size: medium; font-weight: normal; }
      #output h2 { font-size: small; font-weight: normal; }
      #output div { font-size: small; margin: 0px; }
      #output .pass { color: green; }
      #output .fail { color: rgb(255, 0, 0); }
      #output .error { color: rgb(255, 0, 64); }
      td { padding: 2px 5px; }
      table { border-collapse: collapse; }
    </style>
  </head>
  <body>
    <div>Test Results</div>
    <div><table id='outputtable'></table></div>
    <div>Test Video</div>
    <div><video id="video"></video></div>
    <script type="application/x-javascript">
      function drawImage(context, compositeIndex, alpha) {
        context.globalCompositeOperation = compositeTypes[compositeIndex];
        if (alpha)
          context.globalAlpha = 0.5;
        var videoElement = document.getElementById('video');
        context.drawImage(videoElement, 10, 10);
      }

      function setupTest() {}

      var video = document.getElementById("video");
      video.requestVideoFrameCallback(runTest);
      video.src = "resources/canvas_video.webm";
      video.play();
    </script>
  </body>
</html>
